<template>
	<view>
		<no-data v-if="!groupList || groupList.length<=0" desc="暂无套餐"></no-data>
		<view v-else class="group-list">
			<!-- elevation 主要解决 nvue 文件中的android设备的阴影问题 -->
			<view class="group-item" elevation="12px"
				v-for="(item, index) in groupList" :key="index"
			>
				<text class="title">{{item.title}}</text>
				<course-item v-for="(info, i) in item.list" :key="i" :item="info"></course-item>
				<view class="price-box space-between center">
					<view class="price">
						<!-- 套餐价格 -->
						<text class="group-price">￥{{item.groupPrice}}</text>
						<!-- 原总价 -->
						<text class="total-price">￥{{item.totalPrice}}</text>
					</view>
					<!-- 购买按钮 -->
					<text class="buy" @click="buyGroupHandler(item)">购买套餐</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import courseItem from '@/components/common/course-item.vue'
	// 导入套餐模拟数据
	import groupData from '@/mock/courseGroupData.js'

	export default {
		components: {courseItem},

		props: {
			groupList: {
				type: Array, 
				default: () => groupData
			}
		},

		methods: {
			buyGroupHandler(item) {
				this.navTo(`/pages/order/confirm-buy?courseGroup=` + encodeURIComponent(JSON.stringify(item)) )
			}
		}
	}
</script>

<style lang="scss">

	// 套餐项样式
	.group-item {
		margin: 36rpx 30rpx; // 外边距
		background-color: #fff; // 背景颜色
		border-radius: 20rpx; // 圆角
		box-shadow: 2px 0 10px 0 rgba(0,0,0, 0.1); // 阴影效果
		padding: 0 20rpx; // 左右内边距

		.title {
			font-size: 35rpx; // 字体大小
			font-weight: 500; // 字体粗细
			line-height: 70rpx; // 行高
		}

		// 价格区域样式
		.price-box {
			color: $mxg-text-color-red; // 文字颜色
			font-size: 30rpx; // 字体大小
			line-height: 80rpx; // 行高
			font-weight: bold; // 字体加粗
			.group-price {
				font-size: 37rpx; // 字体大小
				margin-right: 10rpx; // 右外边距
			}
			.total-price {
				color: #999; // 文字颜色
				font-weight: normal; // 正常字体粗细
				text-decoration: line-through; // 删除线
			}
		}
	}
</style>
